<template>
  <div>
    <n-layout>
      <n-card>
        <n-space justify="space-between" style="height: 30px;">
          <n-space justify="start">
            <n-steps :current="currentStep">
              <n-step
                  title="资源设置"
              />
              <n-step
                  title="分镜设置"
              >
              </n-step>
              <n-step
                  title="批量重绘"
              />
              <n-step
                  v-if="voiceConfig && voiceConfig.planType==='uploadVoice'"
                  title="音频设置"
              />
            </n-steps>


          </n-space>

          <n-space>
            <n-h3 v-if="story">
              <n-ellipsis style="max-width: 200px">{{ story.name }}
              </n-ellipsis>
            </n-h3>

            <schdule_2 v-if="storyId" :storyId="storyId"></schdule_2>
            <n-button size="small" type="info" @click="settingDrawerShow = true;" v-if="currentStep > 1">
              资源配置
            </n-button>
            <n-button size="small" v-if="currentStep>1" type="primary" @click="prevStep">上一步</n-button>
            <n-button size="small" v-if="currentStep<3 && currentStep>1 && ( voiceConfig && voiceConfig.planType!='uploadVoice')" type="primary" @click="nextStep">下一步</n-button>
            <n-button size="small" v-if="currentStep<4 && currentStep>1 && (voiceConfig && voiceConfig.planType=='uploadVoice')" type="primary" @click="nextStep">下一步</n-button>
            <n-button size="small" v-if="currentStep==1" type="primary" @click="nextStep">下一步</n-button>

          </n-space>
        </n-space>
      </n-card>
    </n-layout>
    <n-layout>
      <n-card v-if="currentStep > 0 && story" :style="`min-height: ${clientHeight- 72}px; `" content-style="padding: 5px 5px 5px 5px;">
        <setting :story="story" :storyCreatorConfig="storyCreatorConfig" :update-story-creator-config="getStoryPaintConfig" ref="settingRef" v-if="currentStep === 1"></setting>
        <videoTextConfig :storyCreatorConfig="storyCreatorConfig" :story="story" ref="videoTextConfigRef" v-if="currentStep === 2"></videoTextConfig>
        <batchRepaint :storyCreatorConfig="storyCreatorConfig" :recover-get-task-info="recover" :story="story" v-if="currentStep === 3 && storyCreatorConfig.paintType==='SD' "></batchRepaint>
        <MJbatchRepaint :storyCreatorConfig="storyCreatorConfig" :recover-get-task-info="recover" :story="story" v-if="currentStep === 3 && storyCreatorConfig.paintType==='MJ' "></MJbatchRepaint>

        <fooocusBatchRepaint :storyCreatorConfig="storyCreatorConfig" :recover-get-task-info="recover" :story="story" v-if="currentStep === 3 && storyCreatorConfig.paintType==='Fooocus'"></fooocusBatchRepaint>


        <voiceRoom  :storyId="storyId" :storyCreatorConfig="storyCreatorConfig" ref="settingRef" v-if="currentStep === 4 && storyId"></voiceRoom>
      </n-card>
    </n-layout>


    <n-drawer v-model:show="settingDrawerShow" :width="1600" @after-leave="refreshStoryConfig">
      <n-drawer-content title="资源设置" closable>
        <n-space justify="end" style="margin-bottom: 5px">
          <n-button type="error" size="small" :loading="saveSettingConfigLoading" @click="saveSettingConfig" >保存配置</n-button>
        </n-space>
        <setting :useProgramme="false" :update-story-creator-config="getStoryPaintConfig" :storyCreatorConfig="storyCreatorConfig"  :story="story" ref="settingRefNext"></setting>
      </n-drawer-content>
    </n-drawer>
<!--    <Schdule v-if="storyId" :storyId="storyId"></Schdule>-->
      <GlobalUploader/>
  </div>
</template>

<script lang="ts" setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import videoTextConfig from '@/views/pages/create/video/components/imageConfig.vue'
import setting from '@/views/pages/create/video/components/setting.vue'
import batchRepaint from '@/views/pages/create/video/components/batchRepaint.vue'
import fooocusBatchRepaint from '@/views/pages/create/video/components/batchRepaintFooocus.vue'
import MJbatchRepaint from '@/views/pages/create/video/components/batchRepaintMJ.vue'
import voiceRoom from '@/views/pages/create/video/components/voiceRoom.vue'
import {useRouter} from 'vue-router'
import {storyController} from "@/api/story/story.api"
import {storeToRefs} from "pinia"
import {useSystemStore} from "@/store/modules/useSystemStore"
import Bus from "@/components/file/box/GlobalUploader/utils/bus"
import GlobalUploader from "@/components/file/box/GlobalUploader/GlobalUploader.vue"
import Schdule_2 from "@/layout/schdule/indexv2.vue"


const {currentRoute} = useRouter()
const route = currentRoute.value
const currentStep = ref(0)
const videoTextConfigRef = ref(null)
const settingRef = ref(null)
const settingRefNext = ref(null)
const story = ref(null)
const storyId = ref("")
const promptTemplateWidth = ref(800)
const settingDrawerShow = ref(false)
const saveSettingConfigLoading = ref(false)

const storyCreatorConfig =  ref({
  paintType: '',
  resourceId: '',
  chapterId: '',
  voiceType: '',
  paintConfigText:'',
  voiceConfigText:''
})

const voiceConfig = ref(null)

const {
  clientHeight
} = storeToRefs(useSystemStore());

onMounted(() => {
  storyId.value = route.query.storyId as string
  getStep()
  nextTick(() => {
    getStoryInfo()
    getStoryPaintConfig()
    currentStep.value = Number(route.query.step)
  })
  promptTemplateWidth.value = window.innerWidth - 300
  window.addEventListener('resize', handleResize);
})


const getStep = async () => {
  storyController.getStoryStep(storyId.value).then((res) => {
    if(res.code === 200){
      currentStep.value = Number(res.data)
    }
  })
}


const getStoryPaintConfig = async () =>{
  try{
    const res = await storyController.getStoryPaintConfig(storyId.value);
    if(res.code === 200){
      if(res.data != null) {
        // Object.assign(storyCreatorConfig, res.data)
        storyCreatorConfig.value = res.data
        voiceConfig.value = JSON.parse(res.data.voiceConfigText)
        console.log(voiceConfig.value)
      }
    } else {
      window.$message.error(res.msg);
    }
  }catch (error){
    console.error(error);
  }
}


const getStoryInfo = () =>{
  storyController.getStoryById(storyId.value).then((res) => {
    if(res.code === 200){
      story.value = res.data.story
    }
  })
}

// 窗口宽度变化
const handleResize = () => {
  promptTemplateWidth.value = window.innerWidth - 300;
}


const saveSettingConfig = ()=>{
  saveSettingConfigLoading.value = true
  settingRefNext.value?.saveStoryConfig((isOk) => {
    saveSettingConfigLoading.value = false
    if (isOk) {
      settingDrawerShow.value = false
    }
  })
}

const nextStep = async () => {
  if (currentStep.value >= 4) {
    return
  }
  if (currentStep.value === 2) {
    videoTextConfigRef.value?.nextStep((isOk) => {
      if (isOk) {
        currentStep.value += 1
      }
    })
  } else if (currentStep.value == 1) {
    settingRef.value?.saveStoryConfig((isOk) => {
      if (isOk) {
        currentStep.value += 1
      }
    })
  }  else {
    currentStep.value += 1
  }
}


const prevStep = () => {
  if (currentStep.value === 1) {
    return
  }
  currentStep.value = currentStep.value - 1
}
const refreshStoryConfig = () => {
  Bus.emit('refreshStoryConfig')
}

Bus.on('refreshStoryConfig', async () => {
  getStoryInfo()
  await getStoryPaintConfig()
})

</script>
